<template>
  <div class="studentInfo">
    <div v-if="$store.state.teacherInfomation">
      <!-- currentPage: 1, // 当前页码
      pageSize: 5, // 每页的数据条数 -->
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        height="500"
        style="width: 100%"
      >
        <el-table-column label="用户名" prop="u_name"> </el-table-column>
        <el-table-column label="姓名" prop="name"> </el-table-column>
        <el-table-column label="学校" prop="school"> </el-table-column>
        <el-table-column label="院系" prop="faculty"> </el-table-column>
        <el-table-column label="专业" prop="major"> </el-table-column>
        <el-table-column label="班级" prop="classroom"> </el-table-column>
        <el-table-column label="性别" prop="sex"> </el-table-column>
        <el-table-column label="学号" prop="studentid"> </el-table-column>
        <el-table-column label="手机号" prop="phone"> </el-table-column>
        <el-table-column label="邮箱" prop="email"> </el-table-column>
        <el-table-column align="right" width="200">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="请输入学生姓名"
            />
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="block" style="margin-top: 15px">
        <el-pagination
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
    <div v-else>请前往个人中心完善信息 <router-link to="/teacherHome/teacherHomepage">点击前往</router-link> </div>
  </div>
</template>

<script>
import axios from "axios";
import { Message } from "element-ui";
export default {
  watch: {
    search(val, oldval) {
      if (val != "") {
        this.searchStudent(val);
      }
    },
  },
  data() {
    return {
      tableData: [],
      search: "",
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 5, // 每页的数据条数
    };
  },
  methods: {
    //转换性别
    changeSex(arr) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].sex == 0) {
          arr[i].sex = "女";
        } else {
          arr[i].sex = "男";
        }
      }
    },
    //查询学生
    searchStudent(val) {
      axios
        .get(`/v1/teachers/bynamesearchstudentinfo/${val}`)
        .then((res) => {
          if (res.data.status == 200) {
            // console.log(res);
            this.tableData = res.data.data;
            this.changeSex(this.tableData);
          } else {
            Message.error({
              showClose: true,
              message: "搜索失败，暂无该学生",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取学生
    getData() {
      axios
        .get("/v1/teachers/searchstudentinfo")
        .then((res) => {
          if (res.data.status == 200) {
            //   console.log(res);
            this.tableData = res.data.data;
            this.changeSex(this.tableData);
          } else {
            Message.error({
              showClose: true,
              message: "暂无数据",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //当选择每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.currentPage = 1; //从第一页开始显示
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss">
.studentInfo {
  margin-top: 20px;
  width: 100%;
}
</style>